<template>
    <transition name="fade">
        <div class="messStyle" :class="[props.type]" v-show="visible" :style="{top:top+'px'}">
            <slot>
                {{ message }}
            </slot>
        </div>
    </transition>

</template>

<script setup lang="ts">

import { Props } from "./message"
import {ref} from "vue"

let props = defineProps(Props)

// 显示隐藏
let visible = ref(false)
//高度
let top = ref(0)

let t: number | null | undefined = null

// 显示隐藏visible
const traggerVisible = (isTrue:boolean)=>{
   return new Promise(resolve=>{
    visible.value = isTrue
    t = setTimeout(() => {
        clearTimeout(t as any)
        t=null
       resolve("")
       
    }, 300);
   })
}

// 设置top值
const setTop = (topval:number)=>{
    top.value = topval
    return topval
}

defineExpose({
    traggerVisible,
    setTop,
    height:40,
    margin:20
})

</script>

<style scoped lang="scss">

@import "../style/index.scss";
</style>